﻿@{
    ViewBag.Title = "TaskType";
}

<div>
    <label id="successMessages" class="pos-text"></label>
</div>
    <table id="marbleTable" class="stripe row-border order-column" style="width:100%">
        <thead>
            <th>Task Type Id</th>
            <th>Task Type</th>
            <th>Task Type Name</th>
            <th>Requires Manager Approval</th>
            <th>Dispaly in POS</th>
        </thead>
        @{
            int count = 1;
        }
        @foreach (var item in ViewBag.TaskType)
        {  
            <tr onchange="UpdatedList(this)">
                <td>@item.TaskTypeId  </td>

                <td>
                    <input type="text" value="@item.TaskType">
                </td>
                <td>
                    <input type="text" value="@item.TaskTypeName">
                </td>
                <td>
                    <input type="checkbox"  @(item.RequiresManagerApproval ? "checked='checked'" : "") value="@item.RequiresManagerApproval"  id="ActiveFlag@(count)"/>
                </td>
                <td>
                    <input type="checkbox"  @(item.DispalyinPOS ? "checked='checked'" : "") value="@item.DispalyinPOS"  id="DispalyinPOS@(count)"/>
                </td>
            </tr>  
            count++;
        }
    </table>
<div class="action">
    <button class="btn btn-primary btn-md" role="button" onclick="SaveTaskType()">Save</button>
    <button class="btn btn-primary btn-md" role="button" onclick="history.back();" id="back">Back</button>
    <button class="btn btn-primary btn-md" role="button" onclick="location.href='/'">Close</button>
</div>
<script>
    $(document).ready(function () {
        var table = $('#marbleTable').DataTable({
            scrollY: "400px",
            scrollX: true,
            scrollCollapse: true,
            editable: true,
            stateSave: true,
            // paging: true,
            bPaginate: false,
            bInfo: false,
            bFilter: false,
            bSort: false,
            "createdRow": function (row, data, index) {
                $('td', row).addClass('tblRow');
            },
            rowCallback: function (row, data) {
                var element = $('td', row);
                element.on("change", function (e) {
                    UpdatedList($(this).parent().index());
                });
            },
            //order: [[ 0, "desc" ]],
            fixedColumns: {
                leftColumns: 2
            }
        });
        var counter = 1;
       
        $(".tblRow").on("change", function (e) { UpdatedList($(this).parent().index()); });
    });
    function SaveTaskType() {

        var tasktype = [];
        var table = document.getElementById('TasktypeTable');
        for (var r = 1, n = table.rows.length; r < n; r++) {
            if (updatedArray.includes(r)) {
                tasktype.push({
                    TaskTypeId: table.rows[r].cells[0].innerHTML,
                    TaskType: table.rows[r].cells[1].children[0].value,
                    TaskTypeName: table.rows[r].cells[2].children[0].value,
                    RequiresManagerApproval: table.rows[r].cells[3].children[0].checked,
                    DispalyinPOS: table.rows[r].cells[4].children[0].checked

                });
            }
        }
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("UpdateTaskType", "TaskType")',
                 data: JSON.stringify({ tasktype: tasktype }),
                 dataType: "json",
                 success: function (data) {
                     $('#successMessages').text('Data Saved Successfully');
                 },
                 error: function (e) {

                     alert(e);
                 }
             });
         }
         var updatedArray = [];
         function UpdatedList(x) {
             if (!updatedArray.includes(x.rowIndex)) {
                 updatedArray.push(x.rowIndex);
             }
         }
</script>
